<!--
 * @Author: 树墩
 * @Date: 2019-10-17 18:09:28
 * @Description: file content
 -->
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        height: 100%;
      }
      .chat {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
      }
      .chat_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: -webkit-gradient(
          linear,
          left top, left bottom,
          from(rgba(255, 255, 255, 0)), to(rgba(110, 110, 110, 0.1))
        );
        background-image: -webkit-linear-gradient(
          top,
          rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.1)
        );
        background-image: -moz-linear-gradient(
          top,
          rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.1)
        );
        background-image: -o-linear-gradient(
          top,
          rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.1)
        );
        background-image: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.1)
        );
      }
      .chat_nav {
        width: 100%;
        height: 3rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
        margin-top: 1.12rem;
        text-align: center;
        font-size: 0.28rem;
        color: #fff;
      }
      .chat_nav p {
        position: relative;
      }
      .chat_nav p img {
        width: 1.3rem;
        height: 1.3rem;
      }
      .chat_nav span {
        position: absolute;
        top: -0.95rem;
      }
      .chat_nav p:last-child {
        margin-top: 0.2rem;
      }
    </style>
  </head>
  <body>
    <div class="chat">
      <div class="chat_bg"></div>
      <div class="chat_nav">
        <div>
          <span id="time">00:00</span>
          <p id="hangup">
            <img src="./recept_hangup.png" alt="HangUp">
          </p>
          <p id="hangupText">挂断</p>
        </div>
        <div id="acceptId" style="display: none;">
          <p id="accept">
            <img src="./recept_video.png" alt="Accept">
          </p>
          <p>接听</p>
        </div>
      </div>
    </div>
  </body>
  <script>
    !function (w) {
      var e = w.document,
        t = e.documentElement,
        i = 750,
        o = "orientationchange" in w ? "orientationchange" : "resize",
        a = function () {
          var cw = t.clientWidth || document.body.clientWidth;
          t.style.fontSize = cw / i * 100 + "px"
        };
      e.addEventListener && (w.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
      e.body.style.fontSize = '0.28rem';
    }(window);
    apiready = function () {
      var data = api.pageParam;
      if (data.isCall) {
        document.getElementById('hangupText').innerText = '取消'
      } else {
        document.getElementById('hangupText').innerText = '挂断'
        document.getElementById('acceptId').style.display = 'block'
      }

      window.api.addEventListener({
        name: 'chatDataEvent',
      }, function (ret) {
        console.log('receipt form chatDataEvent:' + JSON.stringify(ret))
        if (ret) {
          if (ret.value.didConnect) {
            startChat()
            document.getElementById('acceptId').style.display = 'none'
          }
        }
      })
      document.getElementById('hangup').onclick = function () {
        window.api.sendEvent({
          name: 'chatEvent',
          extra: {
            type: 'hangup'
          }
        })
      }
      document.getElementById('accept').onclick = function () {
        window.api.sendEvent({
          name: 'chatEvent',
          extra: {
            type: 'acceptVideo'
          }
        })
      }
    }
    function startChat() {
      timeNum = new Date().getTime()
      var timeEl = document.getElementById('time')
      setInterval(() => {
        timeEl.innerText = mmss(new Date().getTime() - timeNum)
      }, 1000);
    }


    function mmss(v) {
      if (!v) {
        return '00:00'
      }
      v = parseInt(v / 1000)
      var seconds = v % 60
      var minutes = parseInt(v / 60)
      if (seconds < 10) seconds = '0' + seconds
      if (minutes < 10) minutes = '0' + minutes
      return minutes + ':' + seconds
    }
  </script>
</html>
